import React from 'react'
import {Button, WhiteSpace, Tag} from 'antd-mobile'
import {timer} from '@/utils'
import {history} from 'umi'

export default function (props) {

  return (
    <div className='info'>
      <div className='info-title'>{props?.detail?.name}</div>
      <WhiteSpace size='lg'/>
      {props?.detail?.advantage?.length ? props?.detail?.advantage.map(item => (
        <Tag style={{marginRight: '10px', marginBottom: '10px'}} key={item.id} selected>{item.name}</Tag>
      )) : ''}
      {props?.detail?.houseInfo && <div className='houseInfo'>
        <h1 className='title'>房屋详细信息</h1>
        <div className='info-container'>
          <div>
            <span>{props?.detail?.houseInfo?.houseArea || '未知'}</span>
            <span className='key'>房屋面积</span>
          </div>
          <div>
            <span>{props?.detail?.houseInfo?.direction || '未知'}</span>
            <span className='key'>朝向</span>
          </div>
          <div>
            <span>{props?.detail?.houseInfo?.floor || '未知'}</span>
            <span className='key'>楼型</span>
          </div>
          <div>
            <span>{props?.detail?.houseInfo?.personNum || '未知'}</span>
            <span className='key'>宜居人数</span>
          </div>
        </div>
      </div>}
      <div className='info-msg'>简介：{props?.detail?.description}</div>
      <div className='info-price'>价格：{props?.detail?.rent}</div>
      <div className='info-address'>地址：{props?.detail?.address}</div>
      <div className='info-area'>所在地区：{props?.detail?.area?.name}</div>
      <div className='info-time'>发布时间：{timer(props?.detail?.updatedAt)}</div>
      {props?.detail?.houseInfo?.type && <div className='info-time'>户型：{props?.detail?.houseInfo?.type}</div>}
      {props?.detail?.houseInfo?.remarks && <div className='info-time'>备注：{props?.detail?.houseInfo?.remarks}</div>}
      {props?.detail?.houseInfo?.content && <div className='info-time'>附加描述：{props?.detail?.houseInfo?.content}</div>}
      <WhiteSpace size='lg'/>
      {(props?.detail?.status === 4 || props?.detail?.status === 5) &&
      <Button className='info-warn' type='warning' onClick={() => {
        history.push({pathname: '/appointment/appointmentAdd', query: {id: props?.detail?.id}})
      }}>预定</Button>}
      <WhiteSpace size='lg'/>
      {props?.isCollection ? <Button onClick={() => {
        props.handleClick(0, props.detail?.id)
      }} type='warning'>取消收藏</Button> : <Button onClick={() => {
        props.handleClick(1, props.detail?.id)
      }} type='primary'>收藏</Button>}
      {props?.detail?.device?.length ? props?.detail?.device.map(item => (
        <div key={item.id}>
          <WhiteSpace size="lg"/>
          <p className='title'>{item.name}</p>
          {item?.children?.length ? item.children.map(item1 => (
            <Tag style={{marginRight: '10px', marginBottom: '10px'}} key={item1.id} selected>{item1.name}</Tag>
          )) : ''}
        </div>
      )) : ''}
      <WhiteSpace size="lg"/>
      <div className='Owner'>
        <h1 className='title'>房东信息</h1>
        <div className='info-container' onClick={() => {
          history.push({pathname: '/user/userDetail', query: {id: props?.detail?.oid}})
        }}>
          <img src={props?.detail?.Owner?.userInfo?.avatar || require('@/assets/user.png')}/>
          <div className='info-item'>
            <p className='value'>{props?.detail?.Owner?.nickName || '未知'}</p>
            <p className='key'>昵称</p>
          </div>
          <div className='info-item'>
            <p
              className='value'>{props?.detail?.Owner?.userInfo?.firstName + props?.detail?.Owner?.userInfo?.secondName || '未知'}</p>
            <p className='key'>真实姓名</p>
          </div>
          <div className='info-item'>
            <p className='value'>{props?.detail?.Owner?.userInfo?.phoneNum || '未知'}</p>
            <p className='key'>手机号</p>
          </div>
        </div>
      </div>
    </div>
  )
}
